<template>
	<view class="container">
		<view class="coin-section m-t">
			<view class="form">
				
				<text class="label_tit">充值说明</text>
				<view class="input little-line">
					温馨提示，先充值再提交申请，充值数量要和提交数量一致
				</view>
				
				<text class="label_tit">充值数量</text>
				<view class="input little-line">
					<input type="number" :value="money" data-key="money" @input="inputChange"  placeholder="输入充值数量" class="address"/>
				</view>
				
				<text class="label_tit">备注信息</text>
				<view class="input little-line">
					<input type="text" :value="remark" data-key="remark" @input="inputChange"  placeholder="输入备注信息" class="address"/>
				</view>
				
				<text class="label_tit">上传转账截图</text>
				<view class="images" @click="chooseImage">
					<img :src=" pic || 'static/images/jia.png' ">
				</view>
				
			</view>
			
			<button class="submit" :disabled="submiting" @click="handleSubmit">确认</button>
		</view>
	</view>
</template>

<script>
	import { serveraddress } from '@/utils/serverUrl';
	
	export default {
		data() {
			return {
				token: '',
				imageList: [],
				
				money: '',
				remark: '',
				pic: '',
				
				submiting: false
			};
		},
		
		onLoad(){
			
		},
		onShow() {
			this.token = this.$api.get('token');
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/public/login'
				});
				return;
			}
		},
		methods: {
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			
			//选择图片
			chooseImage: function() {
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有
					success: res => {
						const images = res.tempFilePaths;
						this.uploadFiles(images);
					}
				});
			},
			//上传图片
			async uploadFiles(images) {
				this.imageList.push({
					filePath: images[0],
					progress: 0
				});
				uni.showLoading({
					title: '请稍后..',
					mask: true
				});
			
				let uploadUrl = '';
				try {
					uploadUrl = await this.uploadImage(images[0]);
				} catch (err) {
					console.log(err);
					return;
				}
				
				if (uploadUrl) {
					this.imageList[this.imageList.length - 1].src = uploadUrl;
					this.pic = uploadUrl;
					uni.hideLoading();
				} else {
					//上传失败处理
					this.imageList.pop();
					uni.hideLoading();
					uni.showToast({
						title: '上传中出现问题，已终止上传',
						icon: 'none',
						mask: true,
						duration: 2000
					});
				}
			},
			uploadImage: function(file) {
				return new Promise((resolve, reject) => {
					//发送给后端的附加参数
					const formData = {
						token: this.token
					};
					this.uploadTask = uni.uploadFile({
						url: serveraddress + '/User/rechargeimg',
						filePath: file,
						name: 'file',
						formData: formData,
						success(uploadFileResult) {
							console.log(uploadFileResult);
							const uploadFileRes = JSON.parse(uploadFileResult.data) || {};
							if (uploadFileRes.error === 0 && uploadFileRes.data) {
								console.log(uploadFileRes.data);
								resolve(uploadFileRes.data);
							} else {
								reject('接口返回错误');
							}
						},
						fail() {
							reject('网络链接错误');
						}
					});
					//上传进度
					this.uploadTask.onProgressUpdate(progressRes => {
						this.imageList[this.imageList.length - 1].progress = progressRes.progress;
					});
				});
			},
			
			
			//提交
			handleSubmit() {
				this.submiting = true;
				
				if (!this.money) {
					this.$helper.toast('请输入详细金额','','/static/toast/fail-circle.png');
					this.submiting = false;
					return;
				}
				
				if (!this.pic) {
					this.$helper.toast('请上传充值截图','','/static/toast/fail-circle.png');
					this.submiting = false;
					return;
				}
				
				const param = {};
				param.token = this.token;
				param.money = this.money;
				param.remark = this.remark;
				param.pic = this.pic;
				
				this.$http.request('User', 'recharge', 'POST', param, (res) => {
					this.submiting = false;
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.$helper.toast('提交成功','sucess');
							//返回
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/user/rechargeRecords'
								});
							}, 500);
						}
					}
				});
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 0upx 30upx 30upx 30upx;
	}
	.coin-section{
		background: #fff;
		.s-row{
			background-color: #F7F6FB;
			display:flex;
			align-items:center;
			padding: 20upx 10upx 20upx 10upx;
			.col{
				font-size: 34upx;
				color: #14191F;
				flex:1;
				.icon{
					width: 60upx;
					height: 60upx;
					vertical-align: middle;
					margin-right: 10upx;
				}
				.coin{
					font-weight: 400;
					vertical-align: middle;
				}
				.subtitle{
					font-size: 24upx;
					font-weight: 400;
				}
			}
			.coinLogo {
			    width: 46upx;
				height: 46upx;
			    margin-right: 8px;
			    display: inline-block;
			    vertical-align: middle;
			    float: left;
			}
			.light{
				font-weight: 100;
				font-size: 34upx;
				color: #14191F;
			}
			.r{
				text-align: right;
			}
			.arrow{
				vertical-align: middle;
			}
		}
		.form{
			padding: 0upx;
			display: flex;
			flex-direction: column;
			
			.label_tit{
				margin-top: 20upx;
				color: #14191F;
				font-size: 26upx;
				line-height: 40upx;
			}
			.address{
				width: 650upx;
				height: 80upx;
				border-bottom: #14191F solid 2upx;
				line-height: 80upx;
			}
			.balance{
				margin-top: 10upx;
				color: #8B9FAA;
				font-size: 24upx;
			}
			.input{
				padding: 10upx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.all{
					flex: 0.5;
					text-align: right;
					font-size: 28upx;
					color: #14191F;
					font-weight: bold;
				}
			}
			.images{
				margin-top: 20upx;
				img{
					width: 300upx;
					height: 300upx;
				}
			}
			input{
				color: #8B9FAA;
				font-size: 28upx;
			}
		}
		.desc{
			margin-top: 30upx;
			margin-bottom: 20upx;
			font-size: 28upx;
			color: #8B9FAA;
			display: flex;
			flex-direction: column;
		}
	}
	.submit{
		margin: 60upx 0upx;
		background: #fa436a;
		color: #fff;
		font-size: 30upx;
	}
	
</style>
